@import '~styles/config.scss';

.baseLoadModal {
    position       : fixed;
    top            : 0px;
    left           : 0px;
    width          : 100%;
    height         : 100%;
    background     : rgba(0, 0, 0, 0.9);
    z-index        : 10000;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : all .5s;
    visibility     : hidden;
    opacity        : 0;

    &.true {
        visibility: visible;
        opacity   : 1;
    }

    .box {
        width     : 400px;
        margin-top: -100px;
    }

    .closeBaseLoadBut {
        border       : 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        line-height  : 36px;
        width        : 100px;
        margin       : 40px auto 20px auto;
        color        : #fff;
        cursor       : pointer;
        text-align   : center;
        transition   : all .5s;

        &:hover {
            background: rgba(255, 255, 255, 0.9);
            color     : #000;
        }
    }

    .loader-text {
        padding   : 15px 0px;
        text-align: center;
        width     : 100%;
        color     : #fff;
        font-size : 14px;
    }

    .loader-default {
        margin           : 0px auto;
        width            : 40px;
        height           : 40px;
        border           : solid 5px #fff;
        border-left-color: transparent;
        border-radius    : 50%;
        top              : calc(50% - 24px);
        left             : calc(50% - 24px);
        animation        : rotation 1s linear infinite
    }
}




@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}